
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Work Order Report</i></h5>
                            </div>
                           <div class="ibox-content">
                           <div class="table-responsive">
                           <form id="search_bill_prog">
                           <div class="form-group">
                                <label style="text-align: right;" class="col-lg-4 control-label">Completion</label>
                                <div class="col-lg-4 input-daterange input-group">
                                    <select name="year" class="form-control-custom">
                                     <option value="">--</option>
                                      <?php
                                      $mon = array('','January','February','March','April','May','June','July','August','September','October','November','December');
                                      for($i = date('Y'); $i >= 2010 ; $i--):?>
                                        <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                                      <?php endfor; ?>
                                    </select>
                                    <span class="input-group-addon">-</span>
                                   <select name="month" class="form-control-custom">
                                      <option value="">--</option>
                                      <?php for($o = 1; $o <= 12; $o++):?>
                                        <option value="<?php echo $o < 10 ? '0'.$o : $o; ?>"><?php echo $mon[$o]; ?></option>
                                      <?php endfor; ?>
                                   </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label style="text-align: right;" class="col-lg-4 control-label">Maintain Type</label>
                                <div class="col-lg-4 input-daterange input-group">
                                    <select name="status" class="form-control-custom">
                                    <option value="">--</option>
                                    <?php foreach($wocode as $key): ?>
                                      <option value="<?php echo $key->lookup_code; ?>"><?php echo $key->meaning; ?></option> 
                                    <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                           </form>
                           </div>
                          <center><button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-bill" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p></center>
                           </div><!-- END OF IBOX CONTENT -->
                              <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-9">
                                      <div class="btn-group">
                                        <a style="display:none;" id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                        <a style="display:none;" id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                        <button style="display:none;" id="to_mail" class="btn btn-link" ><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                      </div>
                                    </div>
                                </div>
                             </div><!-- END OF IBOX CONTENT -->
                             <br>
                             <p>Show / Hide Columns</p>
                             <div data-toggle="buttons-checkbox" class="btn-group">
                                <!-- <button class="btn btn-primary btn-xs" data-column="0" type="button">Account Name</button> -->
                                <!-- <button class="btn btn-primary btn-xs" data-column="1" type="button">Account Number</button> -->
                                <!-- <button class="btn btn-primary btn-xs" data-column="2" type="button">Maintainance Type</button> -->
                                <button class="btn btn-white btn-xs" data-column="3" type="button">Completion Date</button>
                                <button class="btn btn-white btn-xs" data-column="4" type="button">Target Date</button>
                                <button class="btn btn-white btn-xs" data-column="5" type="button">Status</button>
                                <button class="btn btn-white btn-xs" data-column="6" type="button">LMR</button>
                                <button class="btn btn-white btn-xs" data-column="7" type="button">NMR</button>
                                <button class="btn btn-white btn-xs" data-column="8" type="button">Assign To</button>
                                <button class="btn btn-white btn-xs" data-column="9" type="button">Completed By</button>
                            </div>
                             <div class="horizontal-slide">
                              <table class="dataTable table table-striped table-hover" style="width:100%;">
                                <thead>
                                  <tr>
                                    <th>Account Name</th>
                                    <th>Account Number</th>
                                    <th>Maintenance Type</th>
                                    <th>Completion Date</th>
                                    <th>Target Date</th>
                                    <th>Status</th>
                                    <th>Last Meter Reading</th>
                                    <th>New Meter Reading</th>
                                    <th>Assign To</th>
                                    <th>Completed By</th>
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table>
                              </div>
                           </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){

        var table = $('.dataTable').DataTable({
              "dom": 'Tgtipf',
              "scrollX": true,
              "iDisplayLength": 50,
              "tableTools": {
                  "aButtons": [{
                                  "sExtends": "xls",
                                  "sButtonText": "Export to Excel"
                              }],
                  "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
              }
          });
        $('.btn-xs').on( 'click', function (e) {
            e.preventDefault();
     
            // Get the column API object
            var column = table.column( $(this).attr('data-column') );
     
            // Toggle the visibility
            column.visible( ! column.visible() );
        } );

        $('#get-bill').click(function(){
          $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status",
            type: 'POST',
            dataType: 'json',
            data: $('#search_bill_prog').serialize(),
            success: function(data){
              $('#get-bill').removeAttr('disabled');
              if(data.length == 0){
                table.rows().clear();
                table.draw();
              }else{
                $.each(data,function(i,item){
                   table.row.add( [ data[i].acct_name , data[i].acct_num, data[i].meaning, data[i].actual_completion_date, data[i].target_date, data[i].status, data[i].last_meter_reading, data[i].new_meter_reading, data[i].assign_by, data[i].comp_by ]);
                });
                table.draw();
              }
            },
            beforeSend: function(){
              $('#get-bill').attr('disabled',true);
              table.rows().clear();
            },
            complete: function(){
               $('#get-bill').removeAttr('disabled');
            }
          });
        });
      });
</script>